<!--销售单据-->
<template>
  <div>
    <el-container>
      <el-header>
        <el-button class="float-left btn" type="primary" round>导出</el-button>
        <el-button class="float-right btn search-btn" type="primary" round>查询</el-button>
        <!-- 搜索按钮 -->
        <el-date-picker class="dataTime float-right" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="|"
          start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">
        </el-date-picker>
        <!-- 时间选择器 -->
        <el-select class="select-input float-right" v-model="value" :placeholder="lang._636" style="width:130px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 有效单据 -->
        <el-select class="select-input float-right" v-model="value" :placeholder="lang._635" style="width:130px;border-radius:14px 0 0 14px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 全部收银员 -->
      </el-header>
      <!-- 顶部栏 -->
      <el-main>
        <el-table class="text-center tables" border :data="tableData" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="operator" :label="lang._637" width="300">
          </el-table-column>
          <el-table-column prop="operationTime" :label="lang._638" width="200">
          </el-table-column>
          <el-table-column prop="type" :label="lang._639" width="130">
          </el-table-column>
          <el-table-column prop="influenceStore" :label="lang._640" width="300">
          </el-table-column>
          <el-table-column prop="logContent" :label="lang._641">
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 中间主要内容 -->
    </el-container>
  </div>
</template>
<style>
  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .ordersn-input {
    height: 28px;
    border: 1px solid #409eff;
    border-right: none;
  }

  .el-input__inner {
    border: none;
    border-radius: 0;
    height: 28px;
    line-height: 28px;
  }

  .select-input {
    height: 28px;
    line-height: 28px;
    border: 1px solid #409eff;
    border-right: none;
    margin-top: 15px;
    overflow: hidden;
  }
  .el-table{
      margin: 0;
  }
  .el-table th {
    text-align: center !important;
  }

  .el-table th,
  .el-table tr {
    background-color: unset;
  }

  .el-table tr {
    background: #edf5ff;
  }

  .el-table__row {
    background: unset !important;
  }

</style>

<style scoped>
  .el-input__inner {
    border: 1px solid red;
  }

  .el-header,
  .el-footer {
    background-color: #FFF;
    color: #333;
    text-align: center;
    height: 60px;
    /* line-height: 60px; */
  }


  .el-main {
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: calc(100vh - 120px - 80px);
    background-color: #f3f4f5;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


  .el-input {
    margin: 0;
    padding: 0
  }

</style>
<style lang="less" scoped>
  .el-header {
    .btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
      margin-left: 0;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 0 0 0 0;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }
    .ordersn-input {
      width: 150px;
      padding: 0;

      margin-top: 15px;
      input {
        border: unset;
      }
    }
  }

  .el-footer {
    p {
      margin: 0;
      padding: 0;
      line-height: 60px;
    }
  }

</style>



<script>
  export default {
    props: ['lang'],
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        ordersn: "", 
        //流水号
        
        tableData: [{
            uid: '1',
            operator: 'pofeng',
            operationTime: '2017-12-31 12:00:00',
            type: '登录云端后台',
            influenceStore: 'Tast Of Blue',
            logContent: '登录云端后台'
        },{
            uid: '1',
            operator: 'pofeng',
            operationTime: '2017-12-31 12:00:00',
            type: '登录云端后台',
            influenceStore: 'Tast Of Blue',
            logContent: '登录云端后台'
        },{
            uid: '1',
            operator: 'pofeng',
            operationTime: '2017-12-31 12:00:00',
            type: '登录云端后台',
            influenceStore: 'Tast Of Blue',
            logContent: '登录云端后台'
        },{
            uid: '1',
            operator: 'pofeng',
            operationTime: '2017-12-31 12:00:00',
            type: '登录云端后台',
            influenceStore: 'Tast Of Blue',
            logContent: '登录云端后台'
        },]
      
        //表格数据
      }
    }
  }

</script>
